// 核心模块
const path = require('path');
// html-webpack-plugin
const htmlWebpackPlugin = require('html-webpack-plugin');
// 第三步: vue-loader 依赖的 vueLoaderPlugin 
const { VueLoaderPlugin } = require('vue-loader');
 
module.exports = {
    // 入口
    entry: path.resolve(__dirname, 'src/main.js'),
    // 出口
    output: {
        // 输出路劲
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),
            filename: 'index.html'
        }),
        // 第四步: 添加插件 
        new VueLoaderPlugin()
    ],
    // 加载第三方 加载器
    module: {
        // 第三方规则.
        rules: [{
                test: /\.css$/,
                // 从右到左.
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                // 从右到左.
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.scss$/,
                // 从右到左. npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            // 处理图片路径的loader
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                // 默认把图片转base64.  传参控制  limit=param 大于或等于param不转base64 => hash值.后缀  name控制显示什么name=[name]原始名字.[ext]原始后缀 图片直接是/下 [name].[ext]
                //  eg: [name].[ext]不同文件夹下同名 显示后个文件夹的 所以
                // 拼上hash值 则 显示同名不同的照片.   
                use: 'url-loader?limit=5848&name=[hash:8]-[name].[ext]'
            },
            // url-loader还可以处理字体
            {
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use: 'url-loader'
            },
            // es6语法转换. exclude 排除忽略
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            // vue的loader 第二步
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // {
            //     test: /vue2-preview.src.*?js$/,
            //     use: 'url-loader'
            // }
        ]
    },
    // 改变引入包的入口文件的路径 方式二
    resolve: {
        alias: {
            // "vue$": 'vue/dist/vue.js'
        }
    }
};